<!doctype html>
<html>
<head>
<title>IE Google Fusion Table Demo</title>
</head>
<body>
<p>This webpage requires IE, HTTPS and Tools/Internet Options/Security/Custom Level/Miscellaneous/Access data sources across domains set to Enable or Prompt.</p>
<form id=form>
<table>
<tr><td>Username<td><input id=username value="@gmail.com" />
<tr><td>Password<td><input id=password type=password />
</table>
<input type=submit>
</form>
<div id=results></div>
<script>
function request(url, data, headers) {
    var request = new XMLHttpRequest();
    request.open(data ? "POST" : "GET", url, false);
    for (var h in headers) {
        request.setRequestHeader(h, headers[h]);
    }
    request.send(data);
    return request;
}
function clientLogin(username, password) {
    var authUrl = "https://www.google.com/accounts/ClientLogin";
    var authData = [
        "Email=" + username,
        "Passwd=" + password,
        "service=fusiontables",
        "accountType=HOSTED_OR_GOOGLE"
    ].join("&");
    var response = request(authUrl, authData, { "Content-Type": "application/x-www-form-urlencoded" });
    return response.responseText.match(/Auth=(.*)/)[1];
}

function ClientLoginFTClient(token) {
    this.token = token;
}
ClientLoginFTClient.prototype.query = function (sql) {
    var url = "https://fusiontables.googleusercontent.com/fusiontables/api/query?jsonCallback=jsonCallback&encid=true";
    if (sql.match(/^(select|describe|show)/i)) {
        url += "&sql=" + encodeURIComponent(sql);
    } else {
        var data = "sql=" + encodeURIComponent(sql);
    }
    var headers = {
        "Authorization": "GoogleLogin auth=" + this.token,
        "Content-Type": "application/x-www-form-urlencoded"
    };
    function jsonCallback(json) {
        // json = { "table": { "cols": ["rowid"], "rows": [["123"]]} }
        return json.table;
    }
    var response = request(url, data, headers);
    var OK = 200;
    if (response.status == OK) {
        return eval(response.responseText);
    } else {
        return response.responseText;
    }
};
document.getElementById("username").focus();

document.getElementById("form").onsubmit = function () {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var token = clientLogin(username, password);
    var ftClient = new ClientLoginFTClient(token);
    Array.prototype.preJoin = function (d) {
        return d + this.join(d);
    };
    function toString(table, caption) {
        if (!table.cols) return table;
        for (var r = 0; r < table.rows.length; r++) {
            table.rows[r].toString = function () {
                return this.preJoin("<td>");
            }
        }
        return "<table><caption>" + caption + "</caption><tr>" + table.cols.preJoin("<th>") + table.rows.preJoin("<tr>") + "</table>";
    }
  function refresh(table, caption) {
    setTimeout(function () {results.innerHTML += toString(table, caption) + "<br>";}, 1);
  }
    var results = document.getElementById("results");
    results.innerHTML = "<br>Results<br>";

    // show tables
    var table = ftClient.query("show tables");
    refresh(table, "show tables");

    // create a table
    table = ftClient.query("create table demoTable (strings:string, numbers:number, locations:location)");
    var tableId = table.rows[0][0];
    refresh(table, "create table");

    // insert row into table
    table = ftClient.query("insert into " + tableId + " (strings, numbers, locations) values ('mystring', 12, 'Palo Alto, CA')");
    var rowId = table.rows[0][0];
    refresh(table, "insert row");

    // show row
    table = ftClient.query("select rowId, strings, numbers, locations from " + tableId + " where numbers=12");
    refresh(table, "show row");

    // update row
    ftClient.query("update " + tableId + " set strings = 'mystring2' where rowId = '" + rowId + "'");
    table = ftClient.query("select * from " + tableId);
    refresh(table, "update row");

    // delete row
    table = ftClient.query("delete from " + tableId + " where rowId = '" + rowId + "'");

    // drop table
    table = ftClient.query("drop table " + tableId);


    return false; // Cancel form.submit().
};
</script>
</body>
</html>
